<template>
	<view class="bgw box-radius u-p-l-28 u-p-r-28 u-font-24">
		<view class="u-flex u-border-bottom u-p-t-20 u-p-b-20 u-col-top u-m-b-15">
			<view class="u-flex-1">
				<!-- <view class="u-tips-color u-m-b-10">
					订单号：861532010065
				</view> -->
				<view class="u-tips-color">
					房源编号：{{detail.rent_house_sn}}
				</view>
			</view>
			<!-- 房源状态【1-待审核2-已通过（未上架）3-未通过4-待出租（已上架）5-已出租】 -->
			<view class="color-red" v-if="detail.status == 3">
				{{detail.status_label}}
			</view>
			<view class="color-orange" v-else-if="detail.status == 1">
				{{detail.status_label}}
			</view>
			<view class="color-green" v-else-if="detail.status == 2 || detail.status == 4">
				{{detail.status_label}}
			</view>
			<view class="color-primary" v-else>
				{{detail.status_label}}
			</view>
		</view>
		<view class="u-m-b-15 u-flex">
			<text class="u-font-28">{{detail.title}}</text>
			<text class="u-font-24">（{{detail.min_area_title}}）</text>
		</view>
		<view class="u-p-b-15">
			<view class=" u-p-b-10 u-content-color" v-if="detail.dong_sn||detail.unit_sn||detail.layer_sn||detail.house_sn">
				具体地址：{{detail.dong_sn}}栋{{detail.unit_sn}}单元{{detail.layer_sn}}层{{detail.house_sn}}
			</view>
			<view class=" u-p-b-10 u-content-color" v-if="detail.addr">
				具体地址：{{detail.addr}}
			</view>
			<view class="u-p-b-10 u-content-color">
				出租方式：{{detail.chuzu_label}}
			</view>
			<view class="u-p-b-10 u-content-color">
				租金：
				<text class="color-orange">￥{{detail.expect_rent_price}}/月</text>
			</view>
		</view>
		<view class="u-flex u-p-b-14 u-p-t-14  u-border-top item-action-box" v-if="action">
			<view class="u-tips-color u-flex-1">
				{{detail.created_at_label}}
			</view>
			<!-- status 房源状态【1-待审核2-已通过（未上架）3-未通过4-待出租（已上架）5-已出租】 -->
			<u-button @click="toDetail" size="mini" shape="circle" class="u-m-l-16 btn-grey">查看详情</u-button>
			<u-button v-if="detail.status == 2" @click="putAway(4)" type="primary" size="mini" shape="circle"
				class="u-m-l-16">上架</u-button>
			<u-button v-if="detail.status == 4" @click="putAway(2)" type="primary" size="mini" shape="circle"
				class="u-m-l-16">下架</u-button>
			<u-button v-if="detail.status == 1 || detail.status == 2 || detail.status == 3" @click="toEdit" type="primary" size="mini" shape="circle" class="u-m-l-16">调整信息</u-button>
			<!-- <u-button @click="" type="primary" size="mini" shape="circle" class="u-m-l-16">退定金</u-button>
			<u-button @click="toContractEdit" type="primary" size="mini" shape="circle" class="u-m-l-16">新增合同</u-button>
			<u-button @click="" type="primary" size="mini" shape="circle" class="u-m-l-16">订单处理</u-button> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin,
		modal
	} = proxy.$util;
	const emit = defineEmits(['refresh']);
	const props = defineProps({
		action: {
			type: Boolean,
			default: true,
		},
		from: {
			type: String,
			default: 'user', // user用户   guan管家中心
		},
		detail: {
			type: Object,
			default: {},
		}
	})
	const toEdit = () => {
		// console.log(props.detail.id)
		navLogin('/pagesSub/rentEdit/rentEdit', {
			id: props.detail.rent_house_id
		})
	}
	const toDetail = () => {
		navLogin('/pagesSub/myRentDetail/myRentDetail', {
			id: props.detail.rent_house_id
		})
	}
	const toContractEdit = () => {
		navLogin('/pagesGuanjia/contractEdit/contractEdit')
	}
	const putAway = (status) => {
		let title = status == 2 ? '确定下架该租房？' : status == 4 ? '确定上架该租房？' : '';
		modal(title).then(() => {
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			proxy.$u.api.userRentPutAway({
				status: status,
				rent_house_id: props.detail.rent_house_id
			}).then(res => {
				let {
					code,
					msg,
					data
				} = res;
				if (code == 200) {
					emit('refresh');
					modal({
						content: msg,
						showCancel: false
					})
				} else {
					modal({
						content: msg,
						showCancel: false
					})
				}
			})
		}).catch(() => {

		})
	}
</script>

<style lang="scss" scoped>

</style>